<template>
  <div class="list">
    <el-dialog
      custom-class="add-dialog"
      :visible.sync="dialogTableVisible"
      title="车位分配"
      :close-on-click-modal="false"
      style="font-size: large;font-weight: bolder;"
    >
      <div id="right">
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          stripe
          align="center"
          tooltip-effect="dark"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#1f2d3d',
            'border-color': '#dfe6ec',
          }"
          style="width: 100%;font-size: 14px;color: #1f2d3d"
          v-loading="loading"
        >
          <el-table-column label="选择" width="35">
            <template slot-scope="{ row }">
              <el-radio
                v-model="selectedRow"
                :label="row.id"
                @change="handleRadioChange(row)"
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="70">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户账号"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="homeaddress"
            label="家庭住址"
            align="center"
            width="250"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center"
            width="100"
            :formatter="typeFormatter"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="parkname"
            label="车位"
            align="center"
            width="200"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next, jumper"
            :page-size="pageSize"
            :current-page="cur_page"
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            background
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
      <div class="btn">
        <button @click="update()">确定</button>
        <button @click="close()">取消</button>
      </div>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "updateCar",
  data() {
    return {
      dialogTableVisible: false,
      tableData: [],
      loading: false,
      loaded: false,
      selectedRow: null,
      total: 0,
      cur_page: 1,
      pageSize: 10,
      pageNo: 1,
      formData: {},
      carData: {}
    };
  },
  created() {
    this.getData();
  },
  methods: {
    init(row) {
      this.formData = {
        ...row,
      };
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      this.search();
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      this.search();
    },
    // 获取用户表信息
    getData() {
      this.loading = true;
      this.$Axios({
        url: "/users/getUsersData",
        method: "get",
        data: {
          type: 1,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    typeFormatter(row, column) {
      const orderstatus = row.type;
      if (orderstatus === "1") {
        return "vip住户";
      } else {
        return "普通住户";
      }
    },
    handleRadioChange(selectedRows) {
      this.carData = selectedRows;
      console.log(this.selectedRow);
      
    },
    edit(){
      this.$axiosToken({
            url: "/parking/editParkData",
            method: "post",
            data: {
              u_id: this.formData.id,
              parkname: this.carData.parkname?this.carData.parkname:"未知车辆",
              parkpay: this.formData.parkpay,
              parktype: Number(this.formData.parktype),
              parkstatus: 1,
            },
            success: (result) => {
              this.$parent.getData();
              this.$message({
                showClose: true,
                message: "车位修改成功",
                type: "success",
              });
            },
          });
    },
    close() {
      this.dialogTableVisible = false;
    },
    // 更新
    update() {
      if (this.selectedRow) {
        this.$axiosToken({
          url: "users/updateParkStatus",
          method: "post",
          data: {
            u_id: this.selectedRow,
            parkId: this.carData.parkId?this.carData.parkId:this.formData.parkId,
            parkname: this.carData.parkname?this.carData.parkname:"未知车辆",
            parkstatus: 1,
          },
          success: (result) => {
            this.edit();
            this.$parent.getData();
            this.$message({
              showClose: true,
              message: "住户车位添加成功",
              type: "success",
            });
          },
        });
        this.dialogTableVisible = false;
      } else {
        this.$message({
          message: "请选择一个用户",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped>
::v-deep .add-dialog {
  width: 854px;
  position: fixed;
  margin: 0;
  overflow: auto;
  height: 100vh;
}

.button1,
.button2,
.button3 {
  border-radius: 4px;
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  width: 9%;
}
::v-deep .el-button--mini,
.el-button--mini.is-round {
  padding: 6px 10px;
}
::v-deep .el-button--mini,
.el-button--small {
  border-radius: 5px;
}
::v-deep .el-dialog.add-dialog {
  margin: 0 !important;
}
.pagination {
  text-align: right;
  margin: 20px 0;
}
#right {
  font-size: medium;
  font-weight: normal;
}
::v-deep .el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}
.list {
  display: flex;
  justify-content: space-between;
}
.left {
  display: flex;
  flex-direction: column;
}
label {
  font-size: 14px;
  color: #606266;
}
.btn{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn button{
    border: 1px solid;
    color: rgb(66, 153, 243);
    border-color: rgba(128, 128, 128, 0.437);
    padding: 9px 15px;
    width: 30%;
    cursor: pointer;
    border-radius: 5px;
}
.btn button:first-child{
  background-color: #409EFF;
  color: white;
}
.btn button:first-child:hover{
    background-color: rgb(123, 179, 236);
}
.btn button:last-child{
  background-color: rgb(162, 53, 53);
  color: white;
}
.btn button:last-child:hover{
    background-color: rgb(227, 68, 68);
}
</style>
